<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>利用canvas画圆弧</title>
</head>
<body>
    <canvas id="oCanvas" width=500 height=600 style="border:1px solid black"></canvas>
</body>

<script>
    // 1.通过id获取canvas对象
    var canvas = document.getElementById("oCanvas");
    // 2.通过canvas对象获取画笔对象
    var ctx = canvas.getContext('2d');
    // 3.通过画笔对象来画
    
    // 移动参考点
    ctx.translate(200,20);
    // 绘制实心圆
    // 3.1 新建一条路径
    ctx.beginPath();
    // 3.2 arc方法来画圆
   
    // 样式
    ctx.fillStyle="blue";   
    ctx.strokeStyle="red"; 
    
    // 圆心点x,y,圆半径,开始弧度,结束弧度,是否顺时针
    ctx.arc(60,70,30,0,2*Math.PI,true);
    
    // 3.3 填充
    ctx.fill();
    
    // 3.4 描边
    ctx.stroke();


    // 绘制一个圆弧
    // 1. 新建一个路径
    ctx.beginPath();

    ctx.lineWidth=5;
    ctx.arc(180,100,20,Math.PI/2,Math.PI*3/2,false);
    ctx.stroke();

 

</script>
</html>